<template>
    <view class="product_display">
        <view class="product">
            <view class="price" style="background-image: url('https://lottery.yywlcm.com/upload/h5/home/7.png')">￥2333</view>
            <image src="../../../../static/test/1.png"></image>
            <text class="name otw">水星甲方</text>
            <text class="detail c_868686 otw">描述文本</text>
            <button class="lucky_btn">参与抽奖</button>
        </view>
        <view class="product">
            <view class="price" style="background-image: url('https://lottery.yywlcm.com/upload/h5/home/7.png')">￥2333</view>
            <image src="../../../../static/test/1.png"></image>
            <text class="name otw">水星甲方</text>
            <text class="detail c_868686 otw">描述文本</text>
            <button class="lucky_btn">参与抽奖</button>
        </view>
        <view class="product">
            <view class="price" style="background-image: url('https://lottery.yywlcm.com/upload/h5/home/7.png')">￥2333</view>
            <image src="../../../../static/test/1.png"></image>
            <text class="name otw">水星甲方</text>
            <text class="detail c_868686 otw">描述文本</text>
            <button class="lucky_btn">参与抽奖</button>
        </view>
    </view>
</template>

<script>
export default {

}
</script>

<style lang="scss">
.product_display {
    margin-top: 20rpx;
    display: flex;
    flex-wrap: wrap;
    .product {
        position: relative;
        text-align: center;
        background-color: #fff;
        height: 500rpx;
        width: 49%;
        border-radius: 30rpx;
        overflow: hidden;
        margin-top: 20rpx;
        &:nth-child(2n) {
            margin-left: 2%;
        }
        .price {
            position: absolute;
            z-index: 1;
            background-size: 100% 100%;
            padding: 10rpx 50rpx 10rpx 10rpx;
            right: 0;
            top: 20rpx;
            color: #fff;
        }
        .price::before {
            content: '';
            height: 1rpx;
            background-color: #fff;
            position: absolute;
            top: 26rpx;
            left: 10rpx;
            z-index: 1;
            width: 70%;
        }
        .price::after {
            content: '';
            height: 1rpx;
            background-color: #fff;
            position: absolute;
            bottom: 26rpx;
            left: 10rpx;
            z-index: 1;
            width: 70%;
        }
        image {
            top: 0;
            left: 0;
            position: absolute;
            height: 300rpx;
            width: 100%;
        }
        text {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
            font-size: 30rpx;
        }
        .name {
            bottom: 135rpx;
        }
        .detail {
            bottom: 90rpx;
        }
        .lucky_btn {
            position: absolute;
            bottom: 10rpx;
            padding: 0;
            line-height: 70rpx;
            width: 230rpx;
            border-radius: 70rpx;
            border: unset;
            background: linear-gradient(180deg, #148DFF 0%, #6CC3FF 100%);
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
        }
    }
}
</style>